<template>
    <div class="idcard-container">
        <ul class="list">
            <li class="item">
                <input
                    placeholder="请输入18省份证号"
                    type="idcard"
                    v-model="idcard"
                >
            </li>
            <li>
                <button
                    @click="query"
                    type="primary"
                >查询</button>
            </li>
        </ul>
        <ul
            class="preview"
            v-show="isShow"
        >
            
            <li class="item">性别: {{info.sex==1?'男':'女'}}</li>
            <li class="item">出生年月日: {{info.birthday}}</li>
            <li class="item">户籍所在地: {{info.addr}}</li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            idcard: "",
            isShow: false,
            info:{
                addr:'',
                sex:'',
                birthday:''
            }
        };
    },
    methods: {
        query() {
            if (this.idcard.trim() == "") {
                wx.showToast({
                    title: "请输入18为身份证",
                    duration: 1000,
                    icon:'none'
                });
            } else {
                this.$http.get({
                    url:'m=Index&a=queryIdcard',
                    data:{
                        idcard:this.idcard
                    }
                }).then(res=>{
                    if(res.errcode==0){
                         const data=res.data.retData;
                        this.info.addr=data.address;
                        this.info.birthday=data.birthday;
                        this.info.sex=data.sex;
                    }else{
                        wx.showToast({
                            title:'查询失败',
                            icon:'none',
                            duration:1000,
                        })
                    }
                   
                });
                this.isShow = true;
            }
        }
    }
};
</script>
<style lang="scss">
@import "./static/styles/reset.scss";
page {
    background-color: $bgColor;
}
.idcard-container {
    .list,
    .preview {
        .item {
            padding: 20rpx;
            margin: 20rpx;
            background-color: #fff;
        }
    }
}
</style>

